<template>
	<view class="page">
		<uni-nav-bar color="#FFFFFF" background-color="#227DE4" status-bar left-icon="left" :border="false"
			rightText="使用说明" title="已兑订单" @clickLeft="back" @clickRight="openWeb('/pages/home/activityDesc?type=3')" />
		<view class="page_con">
			<view class="tabs_1">
				<view class="box_1">
					<view class="text_3" :class="activeIndex == 0 ? 'active':''" @click="changeTab(0)">
						<view>扭蛋券</view>
						<view class="group_1"></view>
					</view>
					<view class="box_2"></view>
					<view class="text_3" :class="activeIndex == 1 ? 'active':''" @click="changeTab(1)">
						<view>线上抽奖</view>
						<view class="group_1"></view>
					</view>
				</view>
			</view>
			<!-- 券列表 -->
			<view class="list_section" v-if="activeIndex == 0">
				<view class="list" v-for="(item,index) in listData" :key="index" @click="openPopup(item)"
					:style="{ backgroundImage: `url(${require(`@/static/img/my/list_back${item.hasUsed}.png`)})` }">
					<!--  -->
					<view class="con">
						<view class="title">
							线下扭蛋券
						</view>
						<view class="time">
							{{ formatDate(item.createTime)}}
						</view>
					</view>
					<view class="right_item right_item1" v-if="item.hasUsed == 1">
						立<br>
						即<br>
						使<br>
						用
					</view>
					<view class="right_item right_item2" v-if="item.hasUsed == 2">
						已<br>使<br>用
					</view>
				</view>
				<view class="onLine_section" v-if=" listData.length == 0">
					<image src="@/static/img/my/onLine.png" mode=""></image>
					<view class="">
						暂无扭蛋券，快去兑换吧~
					</view>
				</view>
			</view>
			<view class="onLine_section" v-if="activeIndex == 1">
				<image src="@/static/img/my/onLine.png" mode=""></image>
				<view class="">
					活动正在准备中，敬请期待
				</view>
			</view>
		</view>


		<!-- 底部tabBar -->
		<tabbar current="4"></tabbar><strong></strong>
		<!-- 弹窗 -->
		<uni-popup ref="popup1" background-color="transparent">
			<view class="container">
				<image class="top_item" src="@/static/img/my/pupop_image.png" mode=""></image>
				<view class="popup-content1">
					<view class="content">
						<view class="img_item" v-if="QRSataus == 2">
							<!-- 已核销 -->
							<image class="img1" src="@/static/img/my/QR_code2.png" mode=""></image>
							<image class="img2" src="@/static/img/my/QR_code.png" mode=""></image>
						</view>
						<view class="QR_content" v-if="QRSataus == 1">
							<view class="canvas">
								<!-- 二维码插件 width height设置宽高 -->
								<canvas canvas-id="qrcode"
									:style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
							</view>
						</view>
						<!-- <view class="text">
							券码：{{qrcodeText}}
						</view> -->
					</view>
					<!-- <view class="butt_submit but">
						<view class="but" v-if="QRSataus == 1" @click="copy">
							复制券码
						</view>
					</view>
					<view class="butt_submit " v-if="QRSataus == 2">
						<view class="but but1">
							已核销
						</view>
					</view> -->
				</view>
				<view class="but_submit">
					<image src="@/static/img/exchange/close.png" mode="" @click="closePopup1"></image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" background-color="transparent">
			<view class="popup-content2">
				<image class="img1" src="@/static/img/exchange/popup_image4.png" mode=""></image>
				<image class="img2" src="@/static/img/exchange/popup_image2.png" mode=""></image>
				<view class="butt_submit">
					<image src="@/static/img/exchange/close.png" mode="" @click="closePopup2"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import tabbar from '@/components/tabBar.vue' //自定义tabBar
	import {
		getBadgeEggSmyList
	} from '@/api/api.js'
	import uQRCode from '@/libs/uqrcode.js'
	import {
		formatDate
	} from '@/utils/formatTime.js'
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				formatDate,
				activeIndex: 0,
				QRStr: "", //二维码券码
				QRSataus: '',
				// 未使用 1，已使用2
				listData: [
					// 	{
					// 	title: "线下扭蛋券",
					// 	time: "2024.08.07 23:22:36",
					// 	status: 1,
					// 	str: "SHU79JLar5scvb2",
					// }, {
					// 	title: "线下扭蛋券",
					// 	time: "2024.08.07 23:22:36",
					// 	status: 2,
					// 	str: "过期了，别扫了",
					// }, 
				],

				// 二维码标识串
				qrcodeText: 'eoruw20230528',
				// 二维码尺寸
				qrcodeSize: 200,

				// 最终生成的二维码图片
				qrcodeSrc: '',
				activityId: '01', //活动id
				adminId: '6325', //管理员id
				timer: null // 计时器
			};
		},
		onLoad() {
			this.gitInit()
		},

		methods: {
			gitInit() {
				getBadgeEggSmyList().then(res => {
					this.listData = res.data
				})
			},
			// generateRandomString() {
			// 	// 生成四位随机字符
			// 	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
			// 	let randomString = '';
			// 	for (let i = 0; i < 4; i++) {
			// 		const randomIndex = Math.floor(Math.random() * characters.length);
			// 		randomString += characters.charAt(randomIndex);
			// 	}
			// 	return randomString;
			// },

			generateQRCodeContent(activityId, adminId) {
				// 生成二维码标识串
				// const randomString = this.generateRandomString();
				// this.qrcodeText = `${activityId}${adminId}${randomString}`;
				this.make()
			},
			// 生成二维码
			make() {
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})

				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						// console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},

			//编号复制
			copy() {
				uni.setClipboardData({
					data: this.qrcodeText, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			closePopup1() {
				this.$refs.popup1.close()
			},
			// 打开弹窗
			openPopup(v) {
				this.qrcodeText = v.code
				this.QRSataus = v.hasUsed
				this.$refs.popup1.open("center")
				if (v.hasUsed == 1) {
					// 未使用，初始化二维码
					// this.generateQRCodeContent(this.activityId, this.adminId);
					this.make()
				}
			},
			changeTab(v) {
				this.activeIndex = v
			},
			back() {
				const pages = getCurrentPages(); // 获取当前页面栈
				if (pages.length < 2) {
					uni.redirectTo({
						url: '/pages/my/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			openWeb(v) {
				// console.log(v)
				uni.navigateTo({
					url: v
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F7F7F7;
		font-size: 0;
		padding-bottom: 120rpx;

	}

	.tabs_1 {

		.box_1 {
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0 0;

			.text_3 {
				color: rgba(150, 160, 184, 1);
				font-size: 32rpx;
				text-align: center;
				width: 49%;

				&.active {
					color: rgba(38, 38, 38, 1);

					.group_1 {
						background-color: rgba(34, 125, 228, 1);
					}
				}
			}

			.box_2 {
				background-color: rgba(219, 219, 219, 1);
				width: 2rpx;
				height: 46rpx;
			}



			.group_1 {
				height: 4rpx;
				background-color: transparent;
				display: inline-block;
				border-radius: 3px;
				width: 107rpx;
				height: 6rpx;
			}
		}

	}

	.list_section {
		padding: 0 30rpx;
		margin-top: 23rpx;
		min-height: calc(100vh - 216rpx);

		.list {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: top center;
			width: 677rpx;
			height: 188rpx;
			margin-bottom: 23rpx;
			display: flex;
			justify-content: space-between;

			.con {
				margin-left: 253rpx;
				padding-top: 45rpx;
				display: inline-block;

				.title {
					font-size: 32rpx;
					color: #262626;
				}

				.time {
					font-size: 24rpx;
					color: #96A0B8;
					margin-top: 17rpx;
				}
			}

			.right_item {
				margin-right: 36rpx;
				margin-top: 20rpx;

			}

			.right_item1 {
				line-height: 34rpx;
				margin-top: 22rpx;
				font-size: 28rpx;
				color: #A75F2D;
			}

			.right_item2 {
				margin-top: 36rpx;
				font-size: 28rpx;
				color: #A7A7A7;
			}

		}

	}

	.onLine_section {
		text-align: center;
		margin-top: 140rpx;
		min-height: calc(100vh - 336rpx);

		image {
			width: 282rpx;
			height: 282rpx;
		}

		view {
			margin-top: 60rpx;
			font-size: 32rpx;
			color: #96A0B8;
		}
	}

	.top_item {
		width: 543rpx;
		height: 152rpx;
	}

	.container {
		text-align: center;

		.but_submit {
			margin-top: 70rpx;

			image {
				width: 65rpx;
				height: 65rpx;
			}
		}

		.popup-content1 {
			width: 565rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 24rpx;

			.content {
				.img_item {
					position: relative;
					margin: 0 auto;

					.img1 {
						width: 194rpx;
						height: 185rpx;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						z-index: 9;
					}

					image.img2 {
						margin-top: 40rpx;
						width: 402rpx;
						height: 402rpx;
						margin-bottom: 40rpx;
					}

				}

				.text {
					margin: 40rpx 0 30rpx;
					font-size: 28rpx;
					color: #96A0B8;
					display: inline-block;
					padding-bottom: 40rpx;
				}
			}

			.butt_submit {
				image {
					width: 65rpx;
					height: 65rpx;
				}
			}
		}
	}

	.popup-content2 {
		text-align: center;

		.img1 {
			width: 220rpx;
			height: 80rpx;
			margin: 66rpx 0 0;
		}

		.img2 {
			width: 288rpx;
			height: 288rpx;
		}

		.butt_submit {
			image {
				width: 65rpx;
				height: 65rpx;
			}
		}
	}

	.butt_submit {
		text-align: center;
		margin-top: 50rpx;

		.but {
			margin: 0 auto;
			width: 350rpx;
			height: 129rpx;
			background-image: url("@/static/img/exchange/butt_back.png");
			font-size: 32rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			color: #FFFFFF;
			text-align: center;
			padding-top: 30rpx;
			font-weight: bold;

		}

		.but1 {
			background-image: url("@/static/img/index/butt_back_disabled.png");
		}
	}
</style>

<!-- 二维码 -->

<style>
	page {
		background-color: #FFFFFF;
	}

	.QR_content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: var(--status-bar-height);



		.canvas {
			margin-top: 50rpx;
			margin-bottom: 36rpx;
			text-align: center;
		}
	}
</style>
